<template>
  <div class="app-container">
    <header>
      <h1>Project-2 使用本地UI库</h1>
    </header>
    
    <main>
      <section class="demo-section">
        <h2>按钮组件演示</h2>
        <div class="component-demo">
          <kx-button>默认按钮</kx-button>
          <kx-button type="primary">主要按钮</kx-button>
          <kx-button type="success">成功按钮</kx-button>
          <kx-button type="warning">警告按钮</kx-button>
          <kx-button type="danger">危险按钮</kx-button>
          <kx-button type="info">信息按钮</kx-button>
        </div>
      </section>
      
      <section class="demo-section">
        <h2>输入框组件演示</h2>
        <div class="component-demo">
          <kx-input v-model="inputValue" placeholder="请输入内容"></kx-input>
          <p class="input-value">输入的内容: {{ inputValue }}</p>
          
          <kx-input type="password" show-password placeholder="请输入密码"></kx-input>
        </div>
      </section>
      
      <section class="demo-section">
        <h2>表单示例</h2>
        <div class="component-demo">
          <div class="form-item">
            <label>用户名：</label>
            <kx-input v-model="formData.username" placeholder="请输入用户名"></kx-input>
          </div>
          
          <div class="form-item">
            <label>密码：</label>
            <kx-input type="password" show-password v-model="formData.password" placeholder="请输入密码"></kx-input>
          </div>
          
          <div class="form-actions">
            <kx-button type="primary" @click="handleSubmit">提交</kx-button>
            <kx-button @click="handleReset">重置</kx-button>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 输入框示例的数据
const inputValue = ref('');

// 表单示例的数据
const formData = reactive({
  username: '',
  password: ''
});

// 提交表单
const handleSubmit = () => {
  alert(`提交的数据：\n用户名：${formData.username}\n密码：${formData.password}`);
};

// 重置表单
const handleReset = () => {
  formData.username = '';
  formData.password = '';
};
</script>

<style>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

header {
  margin-bottom: 30px;
  text-align: center;
}

h1 {
  color: #409EFF;
}

h2 {
  margin-bottom: 20px;
  color: #606266;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.component-demo {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.component-demo .kx-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.input-value {
  margin-top: 10px;
  color: #606266;
}

.form-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.form-item label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

.form-item .kx-input {
  flex: 1;
}

.form-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
  text-align: center;
}

.form-actions .kx-button {
  margin: 0 10px;
}
</style> 